import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import LikeBtn from '../../Button/LikeBtn'
import CollectBtn from '../../Button/CollectBtn'
import AvatarView from '../../AvatarView'
import DownloadBtn from '../../Button/DowlLoadBtn'
import EditBtn from '../../Button/EditBtn'
import ModalView from '../../ModalView'
import EditPhotoCard from '../EditPhotoCard'
import { UserService } from '../../../transfer/service/UserService'
import ThanksModel from '../../ModalView/ThanksModel'

interface IImgCardProps {
    data: any
    type: string
}

export default function ImgCard(props: IImgCardProps) {
    const [cardWidth, setCardWidth] = useState<any>()
    const [userName, setUserName] = useState<any>('')
    const [avatar, setAvatar] = useState<any>()
    const [expend, setExpend] = useState(false)
    const [thankExpend, setThankExpend] = useState(false)

    useEffect(() => {
        new UserService().getProfile(props.data.userId).then(res => {
            setUserName(res.data.data.profile.nickName)
            setAvatar('http://localhost:3000/' + res.data.data.profile.avatar)
        })
    }, [props.data])

    const download = () => {
        let image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = () => {
            let canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            let context = canvas.getContext('2d')!
            context.drawImage(image, 0, 0, image.width, image.height)
            let url = canvas.toDataURL('image/jpeg')
            let a = document.createElement('a')
            let event = new MouseEvent('click')
            a.download = 'Lineview.jpeg'
            a.href = url
            a.dispatchEvent(event)
        }
        image.src = 'http://localhost:3000/' + props.data.imageUrl
        setThankExpend(true)
    }

    return (
        <>
            <div
                className={style.img__card}
                style={{
                    ['--card-width' as any]: cardWidth
                }}
                onClick={() => {
                    window.location.pathname = '/photos/' + props.data.id
                }}>
                <div className={style.mask}>
                    <div className={style.top} onClick={e => e.stopPropagation()}>
                        <div
                            className={style.top__left}
                            onClick={() => {
                                setExpend(true)
                            }}>
                            {JSON.parse(localStorage.getItem('account') as any).id == props.data.userId ? (
                                <EditBtn width={'40px'} height={'32px'} />
                            ) : (
                                ''
                            )}
                        </div>
                        <div className={style.top__right}>
                            <LikeBtn width={'40px'} height={'32px'} imgId={props.data.id} />
                            {/*<CollectBtn width={'40px'} height={'32px'} imgId={props.data.imgId} />*/}
                        </div>
                    </div>
                    <div className={style.bottom} onClick={e => e.stopPropagation()}>
                        <div className={style.user}>
                            <AvatarView width={'32px'} height={'32px'} img={avatar} />
                            <span>{userName}</span>
                        </div>
                        <DownloadBtn width={'40px'} height={'32px'} download={download} imgId={props.data.id} />
                    </div>
                </div>
                <div className={style.card}>
                    <img src={'http://localhost:3000/' + props.data.imageUrl} />
                </div>
            </div>
            {expend ? (
                <ModalView onClose={() => setExpend(false)}>
                    <div className={style.photo__container}>
                        <div className={style.photo__bg}>
                            <img src={'http://localhost:3000/' + props.data.imageUrl} />
                        </div>
                        <EditPhotoCard imgId={props.data.id} data={props.data} />
                    </div>
                </ModalView>
            ) : (
                ''
            )}
            {thankExpend ? (
                <ThanksModel
                    url={props.data.imageUrl}
                    userId={props.data.userId}
                    onclose={() => {
                        setThankExpend(false)
                    }}
                />
            ) : (
                ''
            )}
        </>
    )
}
